<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加新项目"
    width="600px"
    class="custom-dialog"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-position="top"
      class="custom-form"
    >
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name" placeholder="输入项目名称" class="custom-input" />
      </el-form-item>
      
      <el-form-item label="项目 URL" prop="githubUrl">
        <el-input 
          v-model="form.githubUrl" 
          placeholder="https://example.com/your-project"
          class="custom-input"
        >
          <template #prefix>
            <el-icon><Link /></el-icon>
          </template>
        </el-input>
        <div class="text-xs text-gray-400 mt-1">
          输入完整的项目URL，例如: https://example.com/your-project
        </div>
      </el-form-item>
      
      <el-form-item label="项目描述" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          :rows="4"
          placeholder="简要描述该项目的功能和用途..."
          class="custom-textarea"
        />
      </el-form-item>
      
      <el-form-item label="编程语言" prop="language">
        <el-select
          v-model="form.language"
          placeholder="选择主要编程语言"
          class="w-full custom-select"
        >
          <el-option label="Python" value="Python" />
          <el-option label="JavaScript" value="JavaScript" />
          <el-option label="TypeScript" value="TypeScript" />
          <el-option label="Go" value="Go" />
          <el-option label="Rust" value="Rust" />
          <el-option label="Java" value="Java" />
          <el-option label="C++" value="C++" />
          <el-option label="C#" value="C#" />
          <el-option label="其他" value="Other" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="标签" prop="tags">
        <el-select
          v-model="form.tags"
          multiple
          placeholder="选择适用的标签"
          class="w-full custom-select"
        >
          <el-option label="agent" value="agent" />
          <el-option label="autonomous" value="autonomous" />
          <el-option label="gpt-4" value="gpt-4" />
          <el-option label="web-based" value="web-based" />
          <el-option label="task-management" value="task-management" />
          <el-option label="memory" value="memory" />
          <el-option label="orchestration" value="orchestration" />
          <el-option label="mcp" value="mcp" />
          <el-option label="multi-agent" value="multi-agent" />
        </el-select>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="flex justify-end gap-2">
        <el-button class="custom-button-secondary" @click="handleCancel">取消</el-button>
        <el-button type="primary" class="custom-button" :loading="loading" @click="handleSubmit">
          {{ loading ? '提交中...' : '添加项目' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { useMcpApiService } from '../../services/McpApiService'

// 属性和事件
const props = defineProps<{
  visible: boolean
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'project-added', count: number): void
}>()

// 表单引用
const formRef = ref<FormInstance>()

// 状态管理
const dialogVisible = ref(false)
const loading = ref(false)

// 表单数据
const form = ref({
  name: '',
  githubUrl: '',
  description: '',
  language: '',
  tags: [] as string[]
})

// 表单验证规则
const rules: FormRules = {
  name: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度应为 2 到 50 个字符', trigger: 'blur' }
  ],
  githubUrl: [
    { required: true, message: '请输入项目 URL', trigger: 'blur' },
    { type: 'url', message: '请输入有效的 URL', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入项目描述', trigger: 'blur' },
    { min: 10, max: 500, message: '描述长度应为 10 到 500 个字符', trigger: 'blur' }
  ],
  language: [
    { required: true, message: '请选择编程语言', trigger: 'change' }
  ],
  tags: [
    { required: true, message: '请至少选择一个标签', trigger: 'change' },
    { 
      validator: (rule, value: string[], callback) => {
        if (value.length < 1) {
          callback(new Error('请至少选择一个标签'))
        } else if (value.length > 5) {
          callback(new Error('最多选择5个标签'))
        } else {
          callback()
        }
      }, 
      trigger: 'change' 
    }
  ]
}

// MCP API服务
const mcpApiService = useMcpApiService()

// 监听可见性变化
watch(() => props.visible, (val) => {
  dialogVisible.value = val
})

watch(() => dialogVisible.value, (val) => {
  emit('update:visible', val)
  if (!val) {
    resetForm()
  }
})

// 方法
const resetForm = () => {
  form.value = {
    name: '',
    githubUrl: '',
    description: '',
    language: '',
    tags: []
  }
  formRef.value?.resetFields()
}

const handleCancel = () => {
  dialogVisible.value = false
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      
      try {
        // 添加项目
        const newProject = await mcpApiService.addProject(form.value)
        
        ElMessage.success(`项目 ${newProject.name} 添加成功！`)
        emit('project-added', 1)
        dialogVisible.value = false
      } catch (error) {
        console.error('添加项目失败:', error)
        ElMessage.error('无法添加项目，请稍后再试')
      } finally {
        loading.value = false
      }
    } else {
      ElMessage.warning('请修正表单中的错误')
    }
  })
}
</script>

<style scoped>
.text-gray-400 {
  color: #9ca3af;
}

/* 对话框样式 */
:deep(.custom-dialog .el-dialog__header) {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: white;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.custom-dialog .el-dialog__title) {
  color: white;
  font-weight: 600;
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 24px;
  background-color: #1f2937;
  color: #e5e7eb;
}

:deep(.custom-dialog .el-dialog__footer) {
  background-color: #1f2937;
  border-top: 1px solid #374151;
  padding: 16px 20px;
}

:deep(.custom-dialog .el-dialog__headerbtn .el-dialog__close) {
  color: white;
}

:deep(.custom-dialog .el-dialog__headerbtn:hover .el-dialog__close) {
  color: #e5e7eb;
}

/* 表单样式 */
.custom-form :deep(.el-form-item__label) {
  color: #d1d5db;
  font-weight: 500;
}

/* 自定义输入框 */
.custom-input :deep(.el-input__wrapper) {
  background-color: #374151;
  box-shadow: 0 0 0 1px #4b5563;
  border-radius: 6px;
  color: #e5e7eb;
}

.custom-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #6366f1;
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #8b5cf6, 0 0 0 3px rgba(139, 92, 246, 0.3);
}

.custom-input :deep(.el-input__inner) {
  color: #e5e7eb;
}

.custom-input :deep(.el-input__inner::placeholder) {
  color: #9ca3af;
}

/* 文本域 */
.custom-textarea :deep(.el-textarea__inner) {
  background-color: #374151;
  box-shadow: 0 0 0 1px #4b5563;
  border-radius: 6px;
  color: #e5e7eb;
  resize: vertical;
}

.custom-textarea :deep(.el-textarea__inner:hover) {
  box-shadow: 0 0 0 1px #6366f1;
}

.custom-textarea :deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 1px #8b5cf6, 0 0 0 3px rgba(139, 92, 246, 0.3);
}

.custom-textarea :deep(.el-textarea__inner::placeholder) {
  color: #9ca3af;
}

/* 下拉选择器 */
.custom-select :deep(.el-input__wrapper) {
  background-color: #374151;
  box-shadow: 0 0 0 1px #4b5563;
  border-radius: 6px;
  color: #e5e7eb;
}

.custom-select :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #6366f1;
}

.custom-select :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #8b5cf6, 0 0 0 3px rgba(139, 92, 246, 0.3);
}

.custom-select :deep(.el-select__tags) {
  background-color: transparent;
}

.custom-select :deep(.el-tag) {
  background-color: #4b5563;
  border-color: #6b7280;
  color: #e5e7eb;
}

.custom-select :deep(.el-tag .el-tag__close) {
  color: #e5e7eb;
  background-color: #6b7280;
}

.custom-select :deep(.el-tag .el-tag__close:hover) {
  background-color: #8b5cf6;
}

/* 自定义按钮 */
.custom-button {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  border: none;
  transition: all 0.3s ease;
}

.custom-button:hover {
  background: linear-gradient(135deg, #5a5fea 0%, #7c3aed 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.custom-button-secondary {
  background-color: #374151;
  border-color: #4B5563;
  color: #E5E7EB;
  transition: all 0.3s ease;
}

.custom-button-secondary:hover {
  background-color: #4B5563;
  border-color: #6B7280;
  transform: translateY(-1px);
}
</style>